<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Media queries</title>
    <style>
        p {
            border: 1px solid black;
            background-color: red;
        }

        .negative {
            background-color: lime;
        }

        @media not all {
            .negative {
                background-color: red !important;
            }
        }

        @media print {
            .negative {
                border: 5px solid magenta !important;
            }
        }

        @media huh {
            .negative {
                color: yellow;
            }
        }

        @media screen {
            .screen {
                background-color: lime;
            }
        }

        @media only all and (min-width: 400px) {
            .size-min {
                background-color: lime;
            }
        }

        @media only all and (width > 399px) {
            .size-min-range {
                background-color: lime;
            }
        }

        @media (max-width: 1000px) {
            .size-max {
                background-color: lime;
            }
        }

        @media (1001px > width) {
            .size-max-range {
                background-color: lime;
            }
        }

        @media (min-width: 400px) and (max-width: 1000px) {
            .size-range {
                background-color: lime;
            }
        }

        @media (400px <= width <= 1000px) {
            .size-range-syntax {
                background-color: lime;
            }
        }

        @media (color) {
            .color {
                background-color: lime;
            }
        }

        @media (not (not (color))) {
            .color-2 {
                background-color: lime;
            }
        }

        @media (color) or ((color) and ((color) or (color) or (not (color)))) {
            .deeply-nested {
                background-color: lime;
            }
        }

        @media (width >= 80em) {
            .em {
                background-color: lime;
            }
        }

        @media (width < 100vh) {
            .viewport {
                background-color: lime;
            }
        }

        @media (aspect-ratio < 4 / 3) {
            .aspect-ratio {
                background-color: lime;
            }
        }
        @media (aspect-ratio >= 2) {
            .aspect-ratio-integer {
                background-color: lime;
            }
        }
        @media (aspect-ratio < 0.5) {
            .aspect-ratio-decimal {
                background-color: lime;
            }
        }
    </style>
</head>
<body>
    <div id="interactive">
        I don't know how wide the page is. <code>window.matchMedia("(min-width: 800px)")</code> is not working. :^(
    </div>
    <p class="negative">
        This should be green if we are correctly ignoring <code>@media</code> rules that do not apply.
    </p>
    <p class="screen">
        This should be green if we are correctly applying <code>@media screen</code>.
    </p>
    <p class="size-min">
        This should be green if the window is at least 400px wide.
    </p>
    <p class="size-min-range">
        This should be green if the window is at least 400px wide, and we understand range syntax.
    </p>
    <p class="size-max">
        This should be green if the window is at most 1000px wide.
    </p>
    <p class="size-max-range">
        This should be green if the window is at most 1000px wide, and we understand range syntax.
    </p>
    <p class="size-range">
        This should be green if the window is between 400px and 1000px wide.
    </p>
    <p class="size-range-syntax">
        This should be green if the window is between 400px and 1000px wide, and we understand range syntax.
    </p>
    <p class="color">
        This should be green if we detected the <code>color</code> feature.
    </p>
    <p class="color-2">
        This should be green if we detected the <code>color</code> feature and we understand <code>not</code>.
    </p>
    <p class="color-2">
        This should be green if we detected the <code>color</code> feature and a deeply nested query: <code>(color) or ((color) and ((color) or (color) or (not (color))))</code>.
    </p>

    <h2>Relative lengths</h2>
    <p class="em">
        This should be green if the window is wider than 80em.
    </p>
    <p class="viewport">
        This should be green if the window is taller than it is wide.
    </p>

    <h2>Ratio</h2>
    <p class="aspect-ratio">
        This should be green if the viewport aspect-ratio is less than 4/3. (So, less wide than a 4:3 ratio.)
    </p>
    <p class="aspect-ratio-integer">
        This should be green if the viewport aspect-ratio is at least 2. (So, at least twice as wide as it is tall.)
    </p>
    <p class="aspect-ratio-decimal">
        This should be green if the viewport aspect-ratio is less than 0.5. (So, at least twice as tall as it is wide.)
    </p>

    <script>
        let mql = window.matchMedia("(min-width: 800px)");
        function update_match_text(input) {
            if (input.matches) {
                document.getElementById("interactive").innerHTML = "<code>window.matchMedia(\"(min-width: 800px)\")</code> matches!";
            } else {
                document.getElementById("interactive").innerHTML = "<code>window.matchMedia(\"(min-width: 800px)\")</code> doesn't match!";
            }
        }
        mql.addEventListener("change", update_match_text);
        update_match_text(mql);
    </script>
</body>
</html>
